<template>
	<div class="orders">
		<header>
			<h1>订单管理</h1>
			<el-select
				v-model="orderType"
				placeholder="请选择订单类型"
				size="small"
				@change="typeChange"
			>
				<el-option
					v-for="item in orderTypes"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
		</header>
		<component :is="showComponent" />
	</div>
</template>

<script>
import OrderConsult from './components/Consult'
import CompetitionProject from './components/CompetitionProject'
import CourseDesign from './components/CourseDesign'

export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Order',
    },
  },
  data() {
    return {
      orderType: 'consult',
      orderTypes: [
        { label: '咨询订单', value: 'consult', component: OrderConsult },
        { label: '竞赛项目订单', value: 'competitionProject', component: CompetitionProject },
        { label: '课程设计订单', value: 'courseDesign', component: CourseDesign },
      ],
    }
  },
  computed: {
    showComponent() {
      const orderType = this.orderTypes.find(item => item.value === this.orderType)

      return orderType.component
    }
  },
  created() {
    this.orderType = this.$route.query.type ? this.$route.query.type : this.orderType
  },
  methods: {
    typeChange() {
      this.$replaceTo(this.$route.name, {
        type: this.orderType
      })
    }
  }
}
</script>

<style lang="scss">
.orders {
  padding: 20px;
  font-size: $sSmall;

  header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    h1 {
      margin-right: 10px;
      color: $blue;
    }
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
